<template>
  <div>
    <a-divider orientation="left">今日数据</a-divider>
    <a-row :gutter="20">
      <a-col :span="3">
        <a-card
          bordered
          hoverable
          :loading="loading"
        >
          <a-statistic
            :value="data.sb_today_rks"
            :value-style="{ color: '#e7505a', fontSize: '30px' }"
          >
            <template slot="title">
              <div style="font-size: 16px;color: #333;">
                今日入库数
              </div>
            </template>
          </a-statistic>
        </a-card>
      </a-col>
      <a-col :span="3">
        <a-card
          bordered
          hoverable
          :loading="loading"
        >
          <a-statistic
            :value="data.sb_today_zlx"
            :value-style="{ color: '#e7505a', fontSize: '30px' }"
          >
            <template slot="title">
              <div style="font-size: 16px;color: #333;">
                今日领新
              </div>
            </template>
          </a-statistic>
        </a-card>
      </a-col>
      <a-col :span="3">
        <a-card
          bordered
          hoverable
          :loading="loading"
        >
          <a-statistic
            :value="data.sb_today_lxrs"
            :value-style="{ color: '#e7505a', fontSize: '30px' }"
          >
            <template slot="title">
              <div style="font-size: 16px;color: #333;">
                今日领新人数
              </div>
            </template>
          </a-statistic>
        </a-card>
      </a-col>
      <a-col :span="3">
        <a-card
          bordered
          hoverable
          :loading="loading"
        >
          <a-statistic
            :value="data.sb_advisers"
            :value-style="{ color: '#e7505a', fontSize: '30px' }"
          >
            <template slot="title">
              <div style="font-size: 16px;color: #333;">
                总人数
              </div>
            </template>
          </a-statistic>
        </a-card>
      </a-col>
      <a-col :span="3">
        <a-card
          bordered
          hoverable
          :loading="loading"
        >
          <a-statistic
            :value="data.sb_surplus_count"
            :value-style="{ color: '#e7505a', fontSize: '30px' }"
          >
            <template slot="title">
              <div style="font-size: 16px;color: #333;">
                今日剩余
              </div>
            </template>
          </a-statistic>
        </a-card>
      </a-col>
    </a-row>
    <a-divider orientation="left">昨日数据</a-divider>
    <a-row :gutter="20">
      <a-col :span="3">
        <a-card
          bordered
          hoverable
          :loading="loading"
        >
          <a-statistic
            :value="data.sb_yesterday_rks"
            :value-style="{ color: '#32c5d2', fontSize: '30px' }"
          >
            <template slot="title">
              <div style="font-size: 16px;color: #333;">
                昨日入库数
              </div>
            </template>
          </a-statistic>
        </a-card>
      </a-col>
      <a-col :span="3">
        <a-card
          bordered
          hoverable
          :loading="loading"
        >
          <a-statistic
            :value="data.sb_yesterday_zlx"
            :value-style="{ color: '#32c5d2', fontSize: '30px' }"
          >
            <template slot="title">
              <div style="font-size: 16px;color: #333;">
                昨日领新
              </div>
            </template>
          </a-statistic>
        </a-card>
      </a-col>
      <a-col :span="3">
        <a-card
          bordered
          hoverable
          :loading="loading"
        >
          <a-statistic
            :value="data.sb_yesterday_lxrs"
            :value-style="{ color: '#32c5d2', fontSize: '30px' }"
          >
            <template slot="title">
              <div style="font-size: 16px;color: #333;">
                昨日领新人数
              </div>
            </template>
          </a-statistic>
        </a-card>
      </a-col>
      <a-col :span="3">
        <a-card
          bordered
          hoverable
          :loading="loading"
        >
          <a-statistic
            :value="data.sb_yesterday_sys"
            :value-style="{ color: '#32c5d2', fontSize: '30px' }"
          >
            <template slot="title">
              <div style="font-size: 16px;color: #333;">
                昨日剩余
              </div>
            </template>
          </a-statistic>
        </a-card>
      </a-col>
    </a-row>
    <a-divider orientation="left">本月/上月数据</a-divider>
    <a-row :gutter="20">
      <a-col :span="3">
        <a-card
          bordered
          hoverable
          :loading="loading"
        >
          <a-statistic
            :value="data.sb_month_rks"
            :value-style="{ color: '#8E44AD', fontSize: '30px' }"
          >
            <template slot="title">
              <div style="font-size: 16px;color: #333;">
                本月入库
              </div>
            </template>
          </a-statistic>
        </a-card>
      </a-col>
      <a-col :span="3">
        <a-card
          bordered
          hoverable
          :loading="loading"
        >
          <a-statistic
            :value="data.sb_month_zlx"
            :value-style="{ color: '#8E44AD', fontSize: '30px' }"
          >
            <template slot="title">
              <div style="font-size: 16px;color: #333;">
                本月领新
              </div>
            </template>
          </a-statistic>
        </a-card>
      </a-col>
      <a-col :span="3">
        <a-card
          bordered
          hoverable
          :loading="loading"
        >
          <a-statistic
            :value="data.sb_last_month_rks"
            :value-style="{ color: '#8E44AD', fontSize: '30px' }"
          >
            <template slot="title">
              <div style="font-size: 16px;color: #333;">
                上月入库
              </div>
            </template>
          </a-statistic>
        </a-card>
      </a-col>
      <a-col :span="3">
        <a-card
          bordered
          hoverable
          :loading="loading"
        >
          <a-statistic
            :value="data.sb_last_month_zlx"
            :value-style="{ color: '#8E44AD', fontSize: '30px' }"
          >
            <template slot="title">
              <div style="font-size: 16px;color: #333;">
                上月领新
              </div>
            </template>
          </a-statistic>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import { tmData } from '@/api/dashboard'

export default {
  name: 'TmData',
  data () {
    return {
      data: {},
      loading: false
    }
  },
  created () {
    this.getTradeData()
  },
  methods: {
    getTradeData () {
      this.loading = true
      tmData().then(res => {
        if (res.status === 0) {
          this.data = res.result.data
        }
      }).finally(() => {
        this.loading = false
      })
    }
  }
}
</script>

<style scoped>

</style>
